import React from 'react';
import { View, Text, TouchableOpacity, FlatList } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceWidth,deviceHeight} from '../../../util';
import RepayAllMentRecordList from './components/repayAllMentRecordList'
import {inject,observer} from "mobx-react/native"
import  userHome from '../../../service/Home/index'



@inject('userAuth')

@observer
export default class MySystemNotice extends React.Component {

    refreshing = false;
    hadMore = false;
    pageSize = 20;
    pageIndex = 1;

    constructor(props) {
      super(props);
      this.state = {
        dataList:[]
      }
    }
    componentDidMount=()=>{
        this.getFetchNoticeList()
    }
    getFetchNoticeList = () => {
        Layer.showLoading()
        this.refreshing = true;
        userHome.fetchUserNotice({
            token:this.props.userAuth.token
        }).then((res)=>{
            this.refreshing = false;
            Layer.hiddenLoading()
            if(res.status == 'success'){
                    let rows = res.data.list;
                   if (this.pageIndex === 1) {
                     this.setState({dataList:rows});
                   } else {
                     this.setState({dataList:this.state.dataList.concat(rows)});
                 }
                 this.hadMore = (rows.length === this.pageSize);
            }
          }).catch((res)=>{
            this.refreshing = false;
            Layer.hiddenLoading()
            Layer.showMsg(res.message)
          }) 

    }
    
    ListEmptyComponent=()=> {
        return(
          <View style={{ height: deviceHeight *0.5,alignItems: 'center', justifyContent: 'center' }}>
          <Text style={{fontSize:25,color:'#8E8E93',fontWeight:'bold'}}>暂无数据</Text>
         </View>
        )
    }
    _renderRefresh = () => {
        this.pageIndex = 1;
        this.getFetchNoticeList();
      }
      _onEndReached = () => {
        if (!this.refreshing && this.hadMore) {
            this.pageIndex++;
            this.getFetchNoticeList();
        }
    }

    render(){
      return(
        <View style={{flex: 1}}>
        <NavBar 
          back={()=>{navigationhelper.goBack() }} 
          title={'消息中心'} 
          leftText={'返回'}
        />
         <FlatList
        refreshing={this.refreshing}
        onRefresh={()=>{this._renderRefresh}}
        ListEmptyComponent={this.ListEmptyComponent}
        data={this.state.dataList}
        keyExtractor={(item, index) =>index}
        ItemSeparatorComponent={this.SeparatorView}
        onEndReachedThreshold={0.1}
        renderItem={({item}) =>
        {
          return(
              <View style={{marginHorizontal:10,marginTop:10,borderRadius:10,paddingHorizontal:20,backgroundColor:'#fff',paddingVertical:20,flexDirection:'column'}}>
              <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                  <Text style={{color:'#2E2E2E',fontSize:16}}>{item.title}</Text>
                  <Text style={{color:'#8E8E93',fontSize:12}}>{item.update_time}</Text>
              </View>
              <View>
                  <Text style={{marginTop:20,color:'#2E2E2E',fontSize:12}}>{item.message}</Text>
              </View>
              </View>
           )
         }
        }/>
     </View>
      ) 
    }

}